<script setup lang="ts">
import { compile } from "path-to-regexp";
import Breadcrumb from "../../../Breadcrumb/index.vue";
import BreadcrumbItem from "../../../Breadcrumb/item.vue";

const route = useRoute();

const settingsStore = useSettingsStore();

// 面包屑备份
let breadcrumbListBackup: any = [];
const breadcrumbList = computed(() => {
  if (route.name === "reload") {
    return breadcrumbListBackup;
  }
  const list = [];
  if (settingsStore.settings.home.enable) {
    list.push({
      path: settingsStore.settings.home.fullPath,
      title: settingsStore.settings.home.title,
    });
  }
  route.matched.forEach((item) => {
    if (item.meta?.breadcrumb !== false) {
      list.push({
        path: item.path,
        title: item.meta?.title,
      });
    }
  });
  breadcrumbListBackup = list;
  return list;
});

function pathCompile(path: string) {
  const toPath = compile(path);
  return toPath(route.params);
}
</script>

<template>
  <Breadcrumb
    v-if="
      settingsStore.mode === 'pc' &&
      settingsStore.settings.app.routeBaseOn !== 'filesystem'
    "
    class="breadcrumb whitespace-nowrap px-2"
  >
    <TransitionGroup name="breadcrumb">
      <BreadcrumbItem
        v-for="(item, index) in breadcrumbList"
        :key="`${index}_${item.path}_${item.title}`"
        :to="
          index < breadcrumbList.length - 1 && item.path !== ''
            ? pathCompile(item.path)
            : ''
        "
      >
        {{ item.title }}
      </BreadcrumbItem>
    </TransitionGroup>
  </Breadcrumb>
</template>

<style scoped>
/* 面包屑动画 */
.breadcrumb-enter-active {
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.breadcrumb-enter-from {
  opacity: 0;
  transform: translateX(30px) skewX(-50deg);
}
</style>
